@mixin button-icon-internal($icon) {
  background: transparent url($icon) no-repeat center center;
  background-size: contain;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

@mixin button-icon($icon, $size: 32px) {
  @extend %button-#{$icon};
  @include button-size($size);
}

@mixin button-size($size) {
  height: $size;
  line-height: $size;
  width: $size;
}

@media screen {
  %button {
    appearance: none;
    background-color: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    opacity: 0.8;
    outline: none;
    padding: 0;
    transition: opacity 0.2s linear;
    -webkit-tap-highlight-color: transparent;

    &:disabled {
      cursor: not-allowed;
      opacity: 0.15 !important;
    }

    &:hover {
      opacity: 1;

      &:active {
        opacity: 0.6;
      }

      &:not(:disabled) {
        transition: none;
      }
    }
  }

  // Use placeholder selectors to prevent multi time definitions of image data URI
  %button-prev {
    @include button-icon-internal('../../assets/osc-prev.svg');
  }

  %button-next {
    @include button-icon-internal('../../assets/osc-next.svg');
  }

  %button-fullscreen {
    @include button-icon-internal('../../assets/osc-fullscreen.svg');

    &.exit {
      background-image: url('../../assets/osc-fullscreen-exit.svg');
    }
  }

  %button-presenter {
    @include button-icon-internal('../../assets/osc-presenter.svg');
  }

  %button-plus {
    @include button-icon-internal('../../assets/plus.svg');
  }

  %button-minus {
    @include button-icon-internal('../../assets/minus.svg');
  }
}
